<template>
  <div class="admin-advertising">
    <div class="admin-advertising-nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/admin/index/home' }"
          ><i class="el-icon-s-home"> 首页</i></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><a href="/admin/index/advertising"
            ><i class="el-icon-picture-outline">广告管理</i></a
          ></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <div class="admin-advertising-add">
      <router-link to="/admin/index/advertising/add"
        ><el-button type="warning">添加图片</el-button></router-link
      >
      <el-button class="del" type="danger">批量删除</el-button>
    </div>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage"
        :page-size="8"
        layout="prev, pager, next, jumper"
        :total="100"
      >
      </el-pagination>
    </div>
    <div class="admin-advertising-main">
      <table>
        <thead>
          <tr>
            <th>
              <input
                type="checkbox"
                :checked="all_checked"
                @change="checkAll"
              />图片编号
            </th>
            <th>图片名称</th>
            <th>图片</th>
            <th>图片分类</th>
            <th>产品操作</th>
          </tr>
        </thead>

        <tbody v-if="tableData">
          <tr v-for="(item, index) in tableData" :key="item.carid">
            <td>
              <input type="checkbox" :checked="item_checked" name="" id="" />{{
                index + 1
              }}
            </td>
            <td>{{ item.carname }}</td>
            <td><img :src="item.carimg" alt="" /></td>
            <td>{{ item.kind }}</td>
            <td>
              <el-button type="primary">编辑</el-button>
              <el-button type="danger" @click="deleteImg(item.carid)"
                >删除</el-button
              >
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    // let url = `http://localhost:3000/v1/imgurl/findAll`;
    // this.axios.get(url).then((res) => {
    //   this.tableData = res.data.data;
    // });
  },
  data() {
    return {
      time: "",
      proname: "",
      currentPage: 1,
      tableData: [],
      item_checked: false,
      all_checked: false,
    };
  },
  methods: {
    deleteImg(carid) {
      var url = `imgurl/delete?carid=${carid}`;
      this.axios
        .delete(url)
        .then((res) => {
          this.$message({
            type: "success",
            message: res.data.msg,
          });
          setTimeout(() => {
            location.reload();
          }, 1000);
        })
        .catch((err) => {
          this.$message({
            type: "error",
            message: err.data.msg,
          });
        });
    },
    checkAll(e) {
      console.log(e.target.checked);
      this.item_checked = e.target.checked;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
  },
  computed: {
    all() {
      //每一个every，checked都是真的
      //return this.items.every(value=>value.checked)
      //every:自动遍历数组，通过箭头函数进行处理。如果每个元素处理后返回的值都是真，则返回真
      return this.items.every((value) => {
        return value.checked == true; //勾选状态是true 则返回true
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.admin-advertising {
  .admin-advertising-add {
    margin: 20px 0;
    width: 98%;
    border: 1px solid rgba(182, 181, 182, 0.4);
    padding: 10px;
    a {
      margin-right: 10px;
    }
  }
  .admin-advertising-main {
    margin-top: 10px;
    width: 99%;
    // border: 1px solid rgba(182, 181, 182, 0.4);
    table {
      width: 100%;
      text-align: center;
      border-collapse: collapse;
      tr {
        display: flex;
      }
      th {
        padding: 10px 0;
        width: 23%;
        border: 1px solid gray;
      }
      td {
        padding: 4px 0;
        width: 23%;
        border: 1px solid gray;
        line-height: 32px;
        button {
          line-height: 6px;
        }
        img {
          width: 100px;
          max-height: 66px;
        }
      }
    }
  }
  .block {
    float: right;
  }
}
</style>
